<!DOCTYPE html>
<html>
<head>
    <title>Ace Cache Manager</title>
    <link href="/static/cache/css/bootstrap-3.1.0.css" rel="stylesheet">
    <link href="/static/cache/css/jquery.jsonview.min.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="container">
    <h1>Ace Cache Manager</h1>
    <br>

    <div id="alert" class="alert alert-success" style="display: none">
        <a href="#" class="close" onclick="$('#alert').hide();">&times;</a> <strong>success!</strong>
    </div>
    <div class="row">
        <hr>
        <div class="col-sm-4">
            <h2>Keys</h2>

            <div class="form-group">
                <label for="input-check-node" class="sr-only">Search Tree:</label>
                <input type="input" class="form-control" id="input-check-node"
                       placeholder="Identify node...">
            </div>
            <div id="treeview-checkable"></div>
        </div>
        <div class="col-sm-4">
            <h2>Desc</h2>

            <div class="form-group">
                <button type="button" class="btn btn-danger expand-node"
                        id="btn-removeAll">removeAll
                </button>
                <button type="button" class="btn btn-primary expand-node"
                        id="btn-remove">remove
                </button>
                <button type="button" class="btn btn-success expand-node"
                        id="btn-update" data-toggle="modal" data-target="#updateModal">delay
                </button>
            </div>
            <strong>key: </strong>

            <div id="key" style="display: inline-block;"></div>
            <br/> <strong>expire: </strong>

            <div id="expireTime" style="display: inline-block;"></div>
            <br/> <strong>desc: </strong>

            <div id="desc" style="display: inline-block;"></div>
            <br/>
        </div>
        <div class="col-sm-4">
            <h2>Preview</h2>

            <div id="privew"></div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">Delay Cache Expired
                    Time</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="expireHour">Expire Hour: </label> <input
                            type="number" class="form-control" id="expireHour" value="1"
                            placeholder="input the expire hour">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    close
                </button>
                <button type="button" id="btn-delay" class="btn btn-primary">delay</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script src="/static/cache/js/jquery-2.1.1.min.js"></script>
<script src="/static/cache/js/bootstrap-3.1.0.js"></script>
<script src="/static/cache/js/bootstrap-treeview.min.js"></script>
<script src="/static/cache/js/jquery.jsonview.min.js"></script>
<script src="/static/cache/js/cache.js"></script>
</body>
</html>
